<template>
  <div class="panel bar">
    <h2>柱形图-就业行业</h2>
    <div class="box"></div>
    <div class="panel-footer"></div>
  </div>
</template>

<script>
export default {
  name: "Bar2",
  mounted() {
    // 实例化对象
    let myChart = this.$echarts.init(document.querySelector(".box"));
    // 指定配置和数据
    let option={
      title: {
        text: "柱形图-就业行业"
      },
      color : ['#2f89cf'],
      tooltip : {
        trigger: "axis",
        axisPointer: {
          // 坐标轴指示器，坐标轴出发有效
          type: "shadow" // 默认为直线，可选为“line"/shadow
        }
      },
      // 网格设置，可以控制线形图、柱状图、图标的大小
      // coutainLabel:true 是否显示刻度标签
      grid:{
        left: "0%",
        top: "10px",
        right: "0%",
        bottom: "4%",
        containLabel: true
      },
      xAxis:[{
        type: "category",
        data: [
            "旅游行业",
            "教育培训",
            "游戏行业",
            "医疗行业",
            "电商行业",
            "社交行业",
            "金融行业"
        ],
        axisTick:{
          alignWithLabel: true
        },
        // 修改坐标轴文字大小颜色等
        axisLabel: {
          textStyle:{
            color: "rgba(255,255,255,0.6)",
            fontSize: "12"
          }
        },
        // x轴样式不显示
        axisLine:{
          show: true
        }
      }],
      yAxis: [{
        type: "value",
        axisLabel: {
          textStyle: {
            color: "rgba(255,255,255,0.6)",
            fontSize: "12"
          }
        },
        // y轴线条样式
        axisLine:{
          lineStyle: {
            color: "rgba(255,255,255,0.1)"
          }
        },
        // y轴分割线样式
        splitLine:{
          lineStyle: {
            color: "rgba(255,255,255,0.1)"
          }
        }
      }],
      series: [{
        name: "直接访问",
        type: "bar",
        // 修改柱子的宽度
        barWidth: "35%",
        // data的数据是动态的，通过请求得到
        // data = this.data
        data: [10,20,30,40,50,10,15],
        itemStyle: {
          // 修改柱子的圆角
          barBorderRadius: 5
        }
      }]
    };

    // 把配置项给实例对象
    myChart.setOption(option);
    // 让图标跟随屏幕自动的去缩放
    window.addEventListener("resize",()=>{
      myChart.resize()
    });

  }
}
</script>

<style scoped>
.box {
  width: 300px;
  height: 300px;
}
</style>
